<template>
  <div id="index">
    <el-carousel :interval="4000" type="card">
      <el-carousel-item v-for="item in picList" :key="item.id">
        <img class="pic" v-bind:src="item" alt />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import axios from "@/utils/axios";
export default {
  name: "Index",
  computed: {},
  data() {
    return {
      // page:["第一页","第二页","第三页","第四页","第五页","第六页"],
      picList: [
        // { src: "./static/img_wall06_a.jpg", title: "第一", id: "1" },
        // { src: "./static/img_wall07_a.jpg", title: "第二", id: "2" },
        // { src: "./static/img_wall06_a.jpg", title: "第三", id: "3" },
        // { src: "./static/img_wall08_a.jpg", title: "第四", id: "4" }
      ]
    };
  },
  created() {
    axios
      .get("/dashboard")
      .then(res => {
        this.picList = JSON.parse(res.data.data);
      })
      .catch(err => {
        console.log(err, "++++++++++++++");
      });
  }
};
</script>
<style >
#index {
  background-color: #23262f;
  border-left: #111317;
  padding: 60px 20px;
}
.el-carousel__item {
  height: calc(100vh - 170px);
  border-radius: 30px;
}

.pic {
  height: 100%;
  width: 100%;
}
.el-carousel__container {
  height: calc(100vh - 170px);
}
/* .carousel{
    height: calc(100vh - 170px);

  } */
</style>